<template>
  <div class="login">
    <h2>旅梦的后台管理系统</h2>
    <div class="login-box">
      <input type="text" name="" id="" v-model="username">
      <input type="text" name="" id="" v-model="password">
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue'

const router = useRouter()

const username = ref('')
const login = () => {
  router.push({ path: '/home', query: { name: username.value } })
}
</script>

<style lang="css" scoped>
.login {
  width: 400px;
  border: 1px solid #000;
  position: absolute;
  left: 10%;
  top: 10%;
}

.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-box input {
  margin: 10px 0;
  padding: 5px 10px;
}

.login-box button {
  padding: 5px 20px;
}
</style>